<template>
  <div id="examination" class="container">
    <table-filter>
      <el-input
        v-model="apiSetting.data.examName"
        placeholder="请输入考试名称"
        clearable
      />
      <el-date-picker
        v-model="timeLimit"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <el-button plain type="warning" @click="search">查询</el-button>
    </table-filter>
    <data-table ref="dtb" :api-setting="apiSetting" pagination>
      <el-table-column
        fixed
        prop="examName"
        label="考试名"
        width="200"
        show-overflow-tooltip
      />
      <el-table-column
        prop="paperName"
        label="试卷名"
        width="200"
        show-overflow-tooltip
      />
      <el-table-column
        prop="subName"
        label="所属科目"
        show-overflow-tooltip
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="160"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          {{ row.createTime | formatterDate }}
        </template>
      </el-table-column>
      <el-table-column
        prop="startTime"
        label="开始时间"
        width="160"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          {{ row.startTime | formatterDate }}
        </template>
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="结束时间"
        width="160"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          {{ row.endTime | formatterDate }}
        </template>
      </el-table-column>
      <el-table-column
        prop="totalScore"
        label="总分"
        width="65"
        show-overflow-tooltip
      />
      <el-table-column
        prop="duration"
        label="时长(min)"
        width="65"
        show-overflow-tooltip
      />
      <el-table-column
        prop="isStuSame"
        label="考生试卷是否相同"
        width="80"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          <el-tag v-if="row.isStuSame" type="success" effect="dark">
            相同
          </el-tag>
          <el-tag v-else type="danger" effect="dark">
            不相同
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="查看分析" width="150">
        <template slot-scope="{ row }">
          <el-button @click="analyze(row, 'Result')" type="text" size="small"
            >成绩</el-button
          >
          <el-button
            v-if="row.isStuSame"
            @click="analyze(row, 'Answer')"
            type="text"
            size="small"
            >答题</el-button
          >
          <el-button @click="analyze(row, 'Score')" type="text" size="small"
            >得分</el-button
          >
        </template>
      </el-table-column>
    </data-table>
    <score ref="scoreDialog" :show.sync="showScoreAnalysis"></score>
    <result ref="resultDialog" :show.sync="showResultAnalysis"></result>
    <answer ref="answerDialog" :show.sync="showAnswerAnalysis"></answer>
  </div>
</template>

<script>
import dtb from "@/mixins/refs/dtb";
import selectTime from "@/mixins/business/selectTime";
import Score from "./analysis/score";
import Result from "./analysis/result";
import Answer from "./analysis/answer";
import tbSearch from "@/mixins/dataTable/tbSearch";

export default {
  name: "index",
  components: { Answer, Result, Score },
  mixins: [tbSearch, dtb, selectTime],
  data() {
    return {
      apiSetting: {
        method: "post",
        url: "/sys/examAnalysis/getExamAnalysisList",
        data: {
          beginTime: "",
          endTime: "",
          examName: ""
        }
      },
      showScoreAnalysis: false,
      showResultAnalysis: false,
      showAnswerAnalysis: false
    };
  },
  methods: {
    analyze({ examId, paperId, examName }, type) {
      this[`show${type}Analysis`] = true;
      const dialog = this.$refs[type.toLowerCase() + "Dialog"];
      this.$nextTick(() => {
        dialog.setParams(paperId, examId);
        dialog.$data.examName = examName;
      });
    }
  }
};
</script>

<style scoped></style>
